/* ==================
          布局
 ==================== */

/*  -- flex弹性布局 -- */

.flex-row {
	display: flex;
	flex-direction: row;
}

/*
flex-direction: // 规则主轴的方向
	row（默认值）：主轴为水平方向，起点在左端。
	row-reverse：主轴为水平方向，起点在右端。
	column：主轴为垂直方向，起点在上沿。
	column-reverse：主轴为垂直方向，起点在下沿。
*/
.flex-col {
	display: flex;
	flex-direction: column;
}

/* .flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.flex-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
} */
/*
# 元素在主轴方向上的排列方式
justify-content:
	flex-start（默认值）：左对齐
	flex-end：右对齐
	center： 居中
	space-between：两端对齐，项目之间的间隔都相等。
	space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
*/
.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

/*
# 元素在副轴方向上的排列方式,（设置容器内所有弹性项目在交叉轴上的对齐方式，是一种批量设置的属性）
align-items:
	flex-start：交叉轴的起点对齐。
	flex-end：交叉轴的终点对齐。
	center：交叉轴的中点对齐。
	baseline: 项目的第一行文字的基线对齐。
	stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
*/
.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.align-center {
	align-items: center;
}

.align-stretch {
	align-items: stretch;
}

.align-baseline {
	align-items: baseline;
}

/*
align-self 它用于单独控制弹性项目（flex item）在交叉轴（cross - axis）上的对齐方式;
在一个 Flex 容器（flex container）中，交叉轴垂直于主轴（main - axis）。当align-self的值为flex-start时，它会使弹性项目沿着交叉轴的起始位置对齐;

在不同布局场景中的效果
	水平主轴布局（flex - direction: row）
		在这种布局下，交叉轴是垂直方向。如果使用align-self: flex-start，弹性项目会靠顶部对齐。
		比如在一个网页的导航栏布局中，有多个导航链接作为弹性项目水平排列（主轴为水平方向），
		其中一个搜索框弹性项目设置了align-self: flex-start，它会在垂直方向上靠顶部对齐，与其他导航链接的垂直对齐方式（如果没有单独设置align-self）区分开来。

	垂直主轴布局（flex - direction: column）
		此时交叉轴是水平方向。align-self: flex-start会使弹性项目靠左侧对齐（假设文本方向是从左到右）。
		例如，在一个侧边栏布局中，有多个菜单项以垂直方向排列（主轴为垂直方向），若某个菜单项设置了align-self: flex-start，它会在水平方向上靠左侧对齐，
		可能会比其他菜单项更突出，用于强调或者区分不同的功能。
*/
.self-start {
	align-self: flex-start;
}

.self-end {
	align-self: flex-end;
}

.self-center {
	align-self: center;
}

.self- {
	align-self: stretch;
}

.self-baseline {
	align-self: baseline;
}

.self-auto {
	align-self: auto;
}

/*
它定义了在分配多余空间之前，项目占据的主轴空间（main - axis）大小；
例如，在一个水平方向的 Flex 容器（flex container）中，主轴是水平方向，flex-basis就决定了弹性项目在水平方向上的初始宽度。
如果 flex-direction: column，则增加高度
如果 flex-direction: row，则宽度是原来的 xx%

*/
.basis-xs {
	flex-basis: 20%;
}

.basis-sm {
	flex-basis: 40%;
}

.basis-df {
	flex-basis: 50%;
}

.basis-lg {
	flex-basis: 60%;
}

.basis-xl {
	flex-basis: 80%;
}

.basis-xxl {
	flex-basis: 90%;
}

.basis-all {
	flex-basis: 100%;
}

/*
flex属性是flex-grow、flex-shrink(收缩比例)和flex-basis这三个属性的缩写组合
-- -------------------------------------------------------------------
当使用flex: 2;这样的写法时，实际上是在同时设置这三个属性的值。
按照缩写规则，它等价于flex-grow: 2; flex-shrink: 1; flex-basis: 0%;。
-- -------------------------------------------------------------------
flex-grow部分的含义
在这个缩写中，flex-grow的值为 2。这意味着在容器有多余空间时，该弹性项目（flex item）会以2倍的比例分配多余空间，
相比flex-grow值为1的其他弹性项目，它会占据更多的额外空间。

例如，有两个弹性项目 A 和 B，
A 的flex属性为flex: 2;
B 的flex属性为flex: 1;
容器的主轴方向（假设是水平方向）有 100px 的多余空间。
按照flex-grow的分配规则，
A = 66.67px = 100 * {2 / (2 + 1)}
B = 33.33px = 100 * {1 / (2 + 1)}
-- -------------------------------------------------------------------
flex-shrink部分的含义
flex-shrink的值被默认设置为 1。当容器空间不足时，弹性项目会根据这个值来收缩。
如果所有弹性项目的flex-shrink都为 1，它们会按照flex-basis（在这种缩写形式下是 0%）和内容大小的比例来收缩。

例如，有三个弹性项目，它们的flex属性都是flex: 2;，容器宽度突然减少。每个项目都会按照相同的比例收缩，以适应容器的新尺寸。

-- -------------------------------------------------------------------
flex-basis部分的含义
这里flex-basis的值为 0%。这表示在分配多余空间或收缩之前，弹性项目在主轴方向上的初始大小是基于其内容的（当flex-basis为 0% 或 0px 等情况时）。
也就是说，弹性项目不会占据额外的固定空间，除非有内容撑开它或者通过flex-grow分配到多余空间。

假设一个弹性项目里面只有一个很小的图标，它的flex: 2;，由于flex-basis是 0%，这个项目一开始可能几乎不占空间，
但是当有多余空间时，它会根据flex-grow的值（这里是 2）来分配空间并变大。
*/
.flex-sub {
	flex: 1;
}

.flex-twice {
	flex: 2;
}

.flex-treble {
	flex: 3;
}

.flex-fourfold {
	flex: 4;
}

.flex-fivefold {
	flex: 5;
}


/*
flex-wrap:项目足够多的时候，是否换行
	- wrap ：换行，第一行在上方。
	- nowrap（默认）：不换行。
	- wrap-reverse：换行，第一行在下方。
*/
.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.flex-rerap {
	flex-wrap: wrap-reverse;
}


.flex-col-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.flex-row-center {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}